<template>
  <div ref="alarmRepairKanban_fullScreen" class="alarmRepairKanban">
    <div class="alarmRepairKanban_header">
      <div class="alarmRepairKanbanHeader_side">
        <img class="alarmKanban_logo" src="@/assets/alarmKanban/alarmKanban_logo.png">
        <img class="alarmKanban_title" src="@/assets/alarmKanban/alarmKanban_title.png">
      </div>
      <div class="alarmRepairKanbanHeader_side">
        <div class="alarmRepairKanbanHeader_numArea">
          <div class="alarmRepairKanbanHeader_alarmLevelArea" style="background-color: rgba(89,11,0,0.63)">
            <div class="alarmRepairKanbanHeader_alarmLevelTitle">
              <span>一</span>
              <span>级</span>
            </div>
            <div class="alarmRepairKanbanHeader_alarmLevelNum">{{ warnEquipNumLevel1 }}台</div>
          </div>
          <div class="alarmRepairKanbanHeader_alarmLevelArea" style="background-color: rgba(89,67,0,0.63)">
            <div class="alarmRepairKanbanHeader_alarmLevelTitle">
              <span>二</span>
              <span>级</span>
            </div>
            <div class="alarmRepairKanbanHeader_alarmLevelNum">{{ warnEquipNumLevel2 }}台</div>
          </div>
          <div class="alarmRepairKanbanHeader_alarmLevelArea" style="background-color: rgba(52,0,89,0.63)">
            <div class="alarmRepairKanbanHeader_alarmLevelTitle">
              <span>三</span>
              <span>级</span>
            </div>
            <div class="alarmRepairKanbanHeader_alarmLevelNum">{{ warnEquipNumLevel3 }}台</div>
          </div>
          <div class="alarmRepairKanbanHeader_alarmLevelArea" style="background-color: rgba(0,46,89,0.63)">
            <div class="alarmRepairKanbanHeader_alarmLevelTitle">
              <span>四</span>
              <span>级</span>
            </div>
            <div class="alarmRepairKanbanHeader_alarmLevelNum">{{ warnEquipNumLevel4 }}台</div>
          </div>
        </div>
        <div class="alarmRepairKanbanHeader_btnArea">
          <div class="alarmRepairKanbanHeader_btn" @click="equipmentPositionMap()">
            <img class="alarmRepairKanbanHeader_btnImg" src="@/assets/alarmKanban/point.png">
          </div>
          <div class="alarmRepairKanbanHeader_btn">
            <img v-if="isFullFlag" src="@/assets/alarmKanban/back.png" @click="exitFullscreen()">
            <i v-else class="el-icon-full-screen alarmRepairKanbanHeader_icon" @click="showScreen()"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="metaCustomTable_area">
      <MetaCustomTable :displayItem="displayItem" :dataList="dataList"></MetaCustomTable>
      <div class="metaCustomTableArea_operationBg">
        <div class="metaCustomTableArea_operationUpBtn" @click="doPageChange('up')">
          <i class="el-icon-arrow-up"></i>
        </div>
        <div class="metaCustomTableArea_operationPage">{{'第 ' + page + ' 页 / 共 ' + totalPage + ' 页'}}</div>
        <div class="metaCustomTableArea_operationDownBtn" @click="doPageChange('down')">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="equipmentPositionDialogFlag"
      width="100%"
      center
      fullscreen
      top="0"
      :modal="false"
      :modal-append-to-body="false"
      :show-close="false"
      custom-class="equipmentPosition_dialog">
      <div class="equipmentPositionDialog_bg">
        <div class="equipmentPositionDialog_mapArea">
          <div class="equipmentPositionDialog_mapTitle">报警位置 - <span :style="'color:' + warningLevelEnumColor[warningLevelIndex]">{{warningLevelEnumLable[warningLevelIndex]}}</span></div>
          <div class="equipmentPositionDialog_closeBtn" @click="closeAlarmPositionDialog()">
            <i class="el-icon-close"></i>
          </div>
          <div id="epMap" class="equipmentPositionDialog_map"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import utils from '@/utils/utils'
import deepClone from '@/utils/deepClone'
import eventBus from '@/utils/eventBus'
import MetaCustomTable from '../components/MetaCustomTable'
export default {
  name: 'alarmRepairKanban',
  components: {
    MetaCustomTable
  },
  data () {
    return {
      isFullFlag: false,
      equipmentPositionDialogFlag: false,
      epMap: null,
      displayItem: [{
        label: '设备名称',
        key: 'equipmentName',
        bgColor: '#005F9C'
      },
      {
        label: '客户',
        key: ''
      },
      {
        label: '设备位置',
        key: 'address',
        width: '130'
        // type: 'splicing',
        // key: ['province','city','area']
      },{
        label: '报警状态',
        type: 'status',
        key: 'wLevel',
        color: {
          '01': 'red',
          '02': 'orange',
          '03': 'yellow',
          '04': '#519EC5'
        }
      },{
        label: '部署时间',
        // type: 'time',
        key: 'firstUse',
        // format: 'yyyy-MM-dd hh:mm:ss',
        width: '180'
      },{
        label: '报警原因',
        key: 'wTypeName',
      },{
        label: '报警时间',
        // type: 'time',
        // format: 'yyyy-MM-dd hh:mm:ss',
        key: 'warningTime',
        width: '180'
      },{
        label: '维修状态',
        type: 'select',
        key: 'warningStatus',
        format: {
          '0': '未开始',
          '1': '已修复',
          '2': '修复中',
          '3': '已指派',
        },
        color: {
          '1': 'white',
          '1': 'green',
          '2': 'orange',
          '3': 'blue'
        }
      },{
        label: '建议维修人',
        key: 'preRepairer',
      },{
        label: '维修人',
        key: 'repairer',
      },{
        label: '报警类型数量',
        key: 'num',
      }],
      listTimeout: null,
      dataList: [],
      page: 0,
      totalPage: 0,
      warnEquipNumLevel1: 0,
      warnEquipNumLevel2: 0,
      warnEquipNumLevel3: 0,
      warnEquipNumLevel4: 0,
      timeoutTime: 10000,
      warningLevelIndex: 0,
      warningLevelEnum: {
        0: '',
        1: '01',
        2: '02',
        3: '03',
        4: '04'
      },
      warningLevelEnumLable: {
        0: '全部设备',
        1: '一级预警',
        2: '二级预警',
        3: '三级预警',
        4: '四级预警'
      },
      warningLevelEnumColor: {
        1: 'red',
        2: 'orange',
        3: 'yellow',
        4: '#519EC5',
        0: 'white'
      },
      mapDataTimeout: null
    }
  },
  created() {
    window.onresize = () => {
      if(!this.isFullscreen()) {
        this.isFullFlag = false
      }else {
        this.isFullFlag = true
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.mapDataTimeout)
    clearTimeout(this.listTimeout)
  },
  mounted() {
    this.getData(1)
  },
  destroyed() {
  },
  methods: {
    getData(page) {
      let nextPage = 1
      if(page) {
        nextPage = page
      }else {
        nextPage = this.page + 1
        if(nextPage > this.totalPage) {
          nextPage = 1
        }
      }
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'warning/dp/findDPWarningPage',
        method: "post",
        data: {
          page: nextPage,
          limit: 10
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.totalPage = res.data.result.page.totalPages
          this.page = nextPage
          this.dataList = res.data.result.page.content

          //报警台数
          for(let i in res.data.result.typeGroup) {
            let levelItem = res.data.result.typeGroup[i]
            if(res.data.result.typeGroup[i].key == '01') {
              this.warnEquipNumLevel1 = levelItem.equipmentNum
            }else if(res.data.result.typeGroup[i].key == '02') {
              this.warnEquipNumLevel2 = levelItem.equipmentNum
            }else if(res.data.result.typeGroup[i].key == '03') {
              this.warnEquipNumLevel3 = levelItem.equipmentNum
            }else if(res.data.result.typeGroup[i].key == '04') {
              this.warnEquipNumLevel4 = levelItem.equipmentNum
            }
          }

          this.listTimeout = setTimeout(this.getData, this.timeoutTime)
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })

    },
    isFullscreen(){
      return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
    },
    showScreen() {
      /**
       * 全屏改成浏览器中全屏
       */
      let docElm = this.$refs.alarmRepairKanban_fullScreen
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      }
      // FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      }
      // Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
      // IE11
      else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
      docElm.style.width = '100%'
      docElm.style.height = '100%'
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    doPageChange(forward) {
      if(forward === 'up') {
        clearTimeout(this.listTimeout)
        let page = this.page - 1
        if(page <= 0) {
          page = this.totalPage
        }
        this.getData(page)
      }else if(forward === 'down') {
        clearTimeout(this.listTimeout)
        let page = this.page + 1
        if(page > this.totalPage) {
          page = 1
        }
        this.getData(page)
      }
    },
    getWarningPointData() {
      let index = this.warningLevelIndex
      if(this.warningLevelIndex < 4) {
        index++
      }else {
        index = 0
      }
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'warning/dp/findDPWarningList',
        method: "post",
        data: {
          warningLevel: this.warningLevelEnum[index]
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.warningLevelIndex = index
          this.showPointOnMap(res.data.result)
          this.mapDataTimeout = setTimeout(this.getWarningPointData, this.timeoutTime)
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    showPointOnMap(data) {
      let that = this
      let fixedMarkerList = []
      that.epMap.clearMap() // 清除地图覆盖物


      for(let i in data) {
        let iconImg = ''
        if(this.warningLevelIndex == '0') {
          if(data[i].wLevel == '01') {
            iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level1.png'
          }else if(data[i].wLevel == '02') {
            iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level2.png'
          }else if(data[i].wLevel == '03') {
            iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level3.png'
          }else if(data[i].wLevel == '04') {
            iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level4.png'
          }
        }else if(this.warningLevelIndex == '1') {
          iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level1.png'
        }else if(this.warningLevelIndex == '2') {
          iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level2.png'
        }else if(this.warningLevelIndex == '3') {
          iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level3.png'
        }else if(this.warningLevelIndex == '4') {
          iconImg = process.env.PROGOO_IMAGE + 'thumbtack/level4.png'
        }
        let markerZIndex = 100
        let icon = new AMap.Icon({
          size: new AMap.Size(30, 30),    // 图标尺寸
          image: iconImg,  // Icon的图像
          imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(30, 30),   // 根据所设置的大小拉伸或压缩图片
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(data[i].longitude, data[i].latitude),
          title: data[i].equipmentName,
          icon: icon,
          anchor:'bottom-center',
          offset: new AMap.Pixel(0,0),
          zIndex: markerZIndex
        });
        marker.on('click', function(e) {

        });
        fixedMarkerList.push(marker)

      }
      that.epMap.add(fixedMarkerList)
    },
    equipmentPositionMap() {
      this.warningLevelIndex = 0
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'warning/dp/findDPWarningList',
        method: "post",
        data: {
          warningLevel: this.warningLevelEnum[this.warningLevelIndex]
        }
      }).then(res => {
        if (res.data.code === 200) {
          clearTimeout(this.listTimeout)
          this.equipmentPositionDialogFlag = true
          this.$nextTick(() => {
            this.epMap = new AMap.Map('epMap', {
              zoom: 5,
              resizeEnable: true,
              center: [120.1212,32.1213],
              pitch: 0,
              viewMode: '3D',
              mapStyle: 'amap://styles/grey'
            })
            this.showPointOnMap(res.data.result)
            this.mapDataTimeout = setTimeout(this.getWarningPointData, this.timeoutTime)
          })
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })

    },
    closeAlarmPositionDialog() {
      this.equipmentPositionDialogFlag = false
      clearTimeout(this.mapDataTimeout)
      this.listTimeout = setTimeout(this.getData, this.timeoutTime)
    }
  }
}
</script>

<style lang="less">
.alarmRepairKanban{
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/alarmKanban/alarmKanbanBg.png");
  background-size: 100% 100%;
  .alarmRepairKanban_header {
    width: 100%;
    height: 100px;
    background-image: linear-gradient(#00D2F4, #001FAD);
    .alarmRepairKanbanHeader_side {
      width: 50%;
      float: left;
      height: 100%;
      display: flex;
      align-items: center;
      .alarmKanban_logo {
        margin-left: 35px;
      }
      .alarmKanban_title {
        margin-left: 25px;
      }
      .alarmRepairKanbanHeader_numArea {
        flex: 1;
        display: flex;
        height: 100%;
        .alarmRepairKanbanHeader_alarmLevelArea {
          flex: 1;
          height: 100%;
          display: flex;
          margin-right: 16px;
          .alarmRepairKanbanHeader_alarmLevelTitle {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border-right: 2px solid #00D2F4;
            text-align: center;
            color: #00D2F4;
            font-size: 20px;
          }
          .alarmRepairKanbanHeader_alarmLevelNum {
            flex: 3;
            height: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            color: white;
            font-size: 20px;
          }
        }
      }
      .alarmRepairKanbanHeader_btnArea {
        width: 180px;
        box-sizing: border-box;
        padding-right: 35px;
        .alarmRepairKanbanHeader_btn {
          width: 50%;
          height: 100%;
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .alarmRepairKanbanHeader_icon {
            font-size: 45px;
            color: #01E7E9;
          }
          .alarmRepairKanbanHeader_btnImg {
            margin: 1px;
          }
        }
      }
    }
  }
  .metaCustomTable_area {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
    .metaCustomTableArea_operationBg {
      width: 100%;
      position: absolute;
      height: 40px;
      bottom: 30px;
      display: flex;
      justify-content: center;
      justify-items: center;
      .metaCustomTableArea_operationUpBtn {
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        margin: 0 5px;
        cursor: pointer;
        i {
          color: white;
          font-size: 18px;
        }
      }
      .metaCustomTableArea_operationUpBtn:hover {
        background: rgba(40,40,40,0.7);
      }
      .metaCustomTableArea_operationDownBtn {
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        margin: 0 5px;
        cursor: pointer;
        i {
          color: white;
          font-size: 18px;
        }
      }
      .metaCustomTableArea_operationDownBtn:hover {
        background: rgba(40,40,40,0.7);
      }
      .metaCustomTableArea_operationPage {
        color: white;
        width: 30%;
        font-size: 18px;
        line-height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: center;
      }
    }
  }
  .el-dialog__wrapper {
    position: absolute!important;
    .equipmentPosition_dialog{
      width: 100%;
      height: 100%;
      background: unset!important;
      .equipmentPositionDialog_bg {
        width: 100%;
        height: 100%;
        background: rgba(18,55,99,0.66);
        box-sizing: border-box;
        padding: 70px 20px 20px;
        .equipmentPositionDialog_mapArea {
          width: 100%;
          height: 100%;
          background-color: #16263D;
          border-radius: 8px;
          border: 1px solid #00D2F4;
          position: relative;
          overflow: hidden;
          .equipmentPositionDialog_mapTitle {
            line-height: 64px;
            color: white;
            top: 0;
            left: 0;
            height: 64px;
            font-size: 23px;
            padding: 0 30px;
            position: absolute;
            z-index: 999999;
          }
          .equipmentPositionDialog_closeBtn {
            top: 0;
            right: 0;
            width: 55px;
            height: 55px;
            position: absolute;
            z-index: 999999;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            i {
              font-size: 20px;
              color: white;
            }
          }
          .equipmentPositionDialog_closeBtn:hover {
            background-color: rgba(100,100,100,0.3);
            border-top-right-radius: 8px;
          }
          .equipmentPositionDialog_map {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .equipmentPosition_dialog .el-dialog__header {
      padding: 0;
    }
    .equipmentPosition_dialog .el-dialog__body {
      height: 100%;
      padding: 0!important;
    }
  }
}

</style>
